<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>H+ 后台主题UI框架 - 基本表单</title>
    <link th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/summernote/summernote.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/summernote/summernote-bs3.css}" rel="stylesheet"/>
    <style>
        #staffMsg div div {
            padding-left: 5px;
            padding-right: 5px;
            border: 1px solid rgba(150, 150, 150, .7);
            border-radius: 4px;
            margin-right: 15px;
        }

        #staffMsg div:last-child {
            margin-left: 0;
        }

    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会议详情
                        <small>会议详情记录</small>
                    </h5>
                    <div class="ibox-tools ">
                        <a class="collapse-link ">
                            <i class="fa fa-chevron-up "></i>
                        </a>
                    </div>
                    <div class="ibox-content ">
                        <form class="form-horizontal m-t ">
                            <div class="form-group ">
                                <label class="col-sm-2 control-label ">会议组织者</label>
                                <div class="col-sm-2 " style="border-right:1px solid rgba(151,151,151,0.7) ; ">
                                    <p class="form-control-static " id="personMsg ">
                                        <img th:src="${organizer.userAvator}" style="width:30px;height: 30px; " class="img-circle"/>
                                        <span style="padding-left: 10px; " th:text="${organizer.userName}"></span>
                                    </p>
                                </div>
                                <label class="col-sm-2 control-label ">会议时间</label>
                                <div class="col-sm-2 " style="border-right:1px solid rgba(151,151,151,0.7) ; ">
                                    <p class="form-control-static ">
                                        <span style="padding-left: 10px; "
                                              th:text="${#dates.format(meetRecord.meetStart, 'yyyy-MM-dd hh:mm:ss')}">2018-08-15 08:30:00</span>
                                    </p>
                                </div>
                                <label class="col-sm-2 control-label ">会议地点</label>
                                <div class="col-sm-2 ">
                                    <p class="form-control-static ">
                                        <span style="padding-left: 10px; " th:text="${meetRecord.meetAddress}"></span>
                                    </p>
                                </div>
                                <label class="col-sm-2 control-label ">会议时长</label>
                                <div class="col-sm-2 ">
                                    <p class="form-control-static ">
                                        <span style="padding-left: 10px; " th:text="${meetRecord.meetDuring}"></span>
                                    </p>
                                </div>
                                <label class="col-sm-2 control-label ">会议主题</label>
                                <div class="col-sm-2 ">
                                    <p class="form-control-static ">
                                        <span style="padding-left: 10px; " th:text="${meetRecord.meetTheme}"></span>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="ibox-content " id="staffMsg ">
                        <form class="form-horizontal m-t ">
                            <div class="form-group ">
                                <label class="col-sm-2 control-label ">会议参与者</label>
                                <div class="col-sm-10 ">
                                    <div class="col-sm-2 " style="width: auto; "
                                         th:each="attendee,stat:${meetRecord.meetAttendees}">
                                        <p class="form-control-static ">
                                            <img th:src="${attendee?.userAvator}" style="width:20px;height: 20px; " class="img-circle"/>
                                            <input name="meetAttendeeId" th:value="attendee.userId"
                                                   type="hidden"/>
                                            <a style="padding-left: 10px; color: #363636; "
                                               th:text="${attendee.userName}"></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                    <!--<h5>会议记录</h5>-->
                    <!--<button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>-->
                    <!--<button id="save" class="btn btn-primary  btn-xs" onclick="save()" type="button">保存</button>-->
                    <!--</div>-->
                    <!--<div class="ibox-content" id="eg">-->

                    <!--<div class="click2edit wrapper">-->
                    <!--</div>-->

                    <!--</div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 style="margin-right: 10px;">会议记录</h5>
                    <button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
                    <button id="save" class="btn btn-primary  btn-xs" onclick="save()" type="button">保存</button>
                </div>
                <div class="ibox-content" id="eg">

                    <div class="click2edit wrapper">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js?v=2.1.4 }"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.6 }"></script>
<!-- layerDate plugin javascript -->
<script th:src="@{/js/plugins/layer/laydate/laydate.js }"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>


<!-- 自定义js -->
<script th:src="@{/js/content.js?v=1.0.0 }"></script>

<!-- iCheck -->
<script th:src="@{/js/plugins/iCheck/icheck.min.js }"></script>
<!-- Chosen -->
<script th:src="@{/js/plugins/chosen/chosen.jquery.js }"></script>

<!-- SUMMERNOTE -->
<script th:src="@{/js/plugins/summernote/summernote.min.js}"></script>
<script th:src="@{/js/plugins/summernote/summernote-zh-CN.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
        });
        var html = [[${meetRecord.meetSummary}]];
        $('.click2edit').html(html);
        $("#save").css("display","none");
    });
    var edit = function () {
        $("#eg").addClass("no-padding ");
        $("#edit").css("display","none");
        $("#save").css("display","block");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true,
            onImageUpload: function (files,editor,welEditable) {
                var formData = new FormData();
                formData.append("attachment", files[0]);
                upload(formData,editor,welEditable);

            },
            onFileUpload: function (files) {
                var formData = new FormData();
                formData.append("attachment", files[0]);
                upload(formData);
            }
        });
    };
    var xhr = new XMLHttpRequest();
    xhr.timeout = 7000;
    xhr.timeout = function () {
        laryer.msg("连接超时，请重试")
    };
    var save = function () {
        $("#eg").removeClass("no-padding ");
        $("#edit").css("display","block");
        $("#save").css("display","none");
        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
        var formData = new FormData();
        formData.append("meetSummary", aHTML);
        xhr.open("post", "addMeetSummary");
        //xhr.setRequestHeader("Content-type", "multipart/form-data");
        xhr.send(formData);

        xhr.onreadystatechange = function (ev) {
            var responses = JSON.parse(xhr.response);
            /* <![CDATA[ */
            if (responses.code == 200 && xhr.readyState == 4 && xhr.status == 200) {
                var index = layer.confirm("会议纪要提交成功", {
                    icon: 1,
                    btn: ["确定", "返回列表"]
                }, function () {
                    layer.close(index);
                }, function () {
                    location.href = "toMeetList";
                });
            }
            /* ]]> */
        }
        $('.click2edit').destroy();
    };

    var upload = function (date,editor,welEditable) {
        xhr.open("post", "attachmentUpload");
        //xhr.setRequestHeader("Content-type", "multipart/form-data");
        xhr.send(date);
        xhr.onreadystatechange = function (ev) {
            var responses = JSON.parse(xhr.response);
            /* <![CDATA[ */
            if (responses.code == 200 && xhr.readyState == 4 && xhr.status == 200) {
                editor.insertImage(welEditable, responses.data);
            }else if(responses.code != 200 && xhr.readyState == 4 && xhr.status == 200){
                layer.alert("上传图片失败",{
                    icon: 0,
                })
            }

            /* ]]> */
        }
    }
</script>
</body>

</html>